<!--依赖elementui-->
<template>
    <div
            v-if="visible"
            class="floating-popup"
            :style="popupStyle"
            @mousedown="startDrag"
            @mousemove="onDrag"
            @mouseup="stopDrag"
            @mouseleave="stopDrag"
    >
        <div class="popup-title">
            <div class="title-btns">
                <!-- 原有关闭按钮 -->
                <div
                        v-if="showClose"
                        @click="closePopup"
                        class="btn-icon"
                        title="关闭"
                >
                    <i class="el-icon-close"></i>
                </div>
            </div>
        </div>
        <div class="popup-content">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'FloatPopup',
        props: {
            visible: Boolean,
            left: Number,
            top: Number,
            right: Number,
            bottom: Number,
            showClose: {
                type: Boolean,
                default: true,
            }
        },
        data() {
            return {
                dragging: false,          // 拖拽状态标记
                startX: 0,                // 拖拽起始X坐标
                startY: 0,                // 拖拽起始Y坐标
                currentL: this.left,      // 当前左定位
                currentT: this.top,       // 当前上定位
                currentR: this.right,     // 当前右定位
                currentB: this.bottom,    // 当前下定位
                useRight: this.right !== undefined, // 是否用右定位
                useBottom: this.bottom !== undefined, // 是否用下定位
                // 存储非全屏时的位置（切换回缩小状态需恢复）
                normalPosition: {
                    left: this.left,
                    top: this.top,
                    right: this.right,
                    bottom: this.bottom
                }
            };
        },
        watch: {
            left(newVal) {
                if (!this.dragging && !this.useRight) {
                    this.currentL = newVal;
                }
            },
            top(newVal) {
                if (!this.dragging && !this.useBottom) {
                    this.currentT = newVal;
                }
            },
            right(newVal) {
                if (!this.dragging && this.useRight) {
                    this.currentR = newVal;
                }
            },
            bottom(newVal) {
                if (!this.dragging && this.useBottom) {
                    this.currentB = newVal;
                }
            }
        },
        computed: {
            popupStyle() {
                const style = {};
                if (this.useRight) {
                    style.right = `${this.currentR}px`;
                } else {
                    style.left = `${this.currentL}px`;
                }
                if (this.useBottom) {
                    style.bottom = `${this.currentB}px`;
                } else {
                    style.top = `${this.currentT}px`;
                }
                return style;
            }
        },
        methods: {
            // 关闭弹窗
            closePopup() {
                this.$emit('close');
            },
            // 开始拖拽（仅非全屏时生效）
            startDrag(event) {
                this.dragging = true;
                if (this.useRight) {
                    // 对于 right 定位，计算初始位置时需要知道窗口宽度
                    const rect = this.$el.getBoundingClientRect();
                    this.startX = event.clientX - (window.innerWidth - rect.width - this.currentR);
                } else {
                    this.startX = event.clientX - this.currentL;
                }
                if (this.useBottom) {
                    // 对于 bottom 定位，计算初始位置时需要知道窗口高度
                    const rect = this.$el.getBoundingClientRect();
                    this.startY = event.clientY - (window.innerHeight - rect.height - this.currentB);
                } else {
                    this.startY = event.clientY - this.currentT;
                }
            },
            // 拖拽中（仅非全屏时生效）
            onDrag(event) {
                if (this.dragging) {
                    if (this.useRight) {
                        const rect = this.$el.getBoundingClientRect();
                        this.currentR = window.innerWidth - rect.width - (event.clientX - this.startX);
                    } else {
                        this.currentL = event.clientX - this.startX;
                    }

                    if (this.useBottom) {
                        const rect = this.$el.getBoundingClientRect();
                        this.currentB = window.innerHeight - rect.height - (event.clientY - this.startY);
                    } else {
                        this.currentT = event.clientY - this.startY;
                    }
                }
            },
            // 结束拖拽
            stopDrag() {
                if (this.dragging) {
                    this.dragging = false;
                    this.$emit('positionChange', {
                        left: this.currentL,
                        top: this.currentT,
                        right: this.currentR,
                        bottom: this.currentB
                    });
                }
            }
        }
    }
</script>
<style lang="scss" scoped>
    // 1. 基础弹窗样式（非全屏状态）
    .floating-popup {
        cursor: pointer;
        position: fixed;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        border: 3px solid rgba(5, 73, 146, 1);
        background-color: rgba(2, 13, 69, 0.4);
        .popup-title {
            flex: 0 1 5%;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            /*background-color: rgba(217, 217, 217, 0.5);*/
            color: black;
            padding: 0 5px;
            // 标题栏按钮组（全屏+关闭）
            .title-btns {
                display: flex;
                gap: 15px; // 按钮间距

                // 按钮样式： hover反馈
                .btn-icon {
                    cursor: pointer;
                    font-size: 16px;
                    transition: color 0.2s;

                    &:hover {
                        color: #054992; //  hover时变色，提示可点击
                    }
                }
            }
        }
        .popup-content {
            flex: 1 1;
            padding: 5px;
            overflow: auto; // 内容超出时显示滚动条
            color: #fff; // 适配深色背景，提升文字可读性
        }
    }
</style>
